/**
 * Created with IntelliJ IDEA.
 * User: seth.yang
 * Date: 15-1-9
 * Time: 下午8:20
 * To change this template use File | Settings | File Templates.
 */
window.onload = function () {
    var scale = document.getElementById ('scale'),
        preDefine = document.getElementById ('predefine-curves'),
        scaleValue = document.getElementById ('scale-value'),
        canvas = document.getElementById ('canvas'),
        panel = document.getElementById ('control-panel'),
        options = {canvas:'canvas', lineStyle: {size: 2}, scale :1, type:'Polar'},
        type = document.getElementById ('type'),
        w = document.body.clientWidth - panel.offsetWidth - 25,
        coordinates,

        // 预定义曲线
        definedCurve = {
            // 直角坐标系
            Cartesian : {
                curves : ['sin', 'cos', 'tan', 'square', 'three'],
                sin : {
                    name : '正弦曲线',
                    display : 'f(x) = sin (x)',
                    formula : function (x) {return Math.sin (x);},
                    options : {lineStyle : {color: '#f00'}}
                },
                cos : {
                    name : '余弦曲线',
                    display : 'f(x) = cos (x)',
                    formula : function (x) { return Math.cos (x); },
                    options : { lineStyle : {color: '#0f0'} }
                },
                tan : {
                    name : '正切曲线',
                    display : 'f (x) = tan (x)',
                    formula : function (x) { return Math.tan (x); },
                    options : { lineStyle : {color: '#00f'} }
                },
                square : {
                    name : '二次曲线',
                    display : 'f (x) = x<sup>2</sup>',
                    formula : function (x) {return x*x;},
                    options: {lineStyle:{color:'#0ff'}}
                },
                three : {
                    name : '三次曲线',
                    display : 'f (x) = x<sup>3</sup>',
                    formula : function (x) { return x * x * x; },
                    options : {lineStyle: {color:'#f0f'}}
                }
            },
            // 极坐标曲线
            Polar : {
                curves : ['ajmd', 'rose', 'heart', 'circle', 'natural', 'yuanzhui', 'test'],
                ajmd : {
                    name : '阿基米德螺线',
                    display : '&rho; (&theta;) = a + b · &theta;',
                    formula : function (x) { return 1 + x / 10; },
                    options : {lineStyle:{color:'#99f'}}
                },
                rose : {
                    name : '玫瑰线',
                    display : '&rho; (&theta;) = a·sin(k·&theta;)',
                    formula : function (x) { return 5 * Math.cos (4 * x); },
                    options : {lineStyle:{color:'#f0f'}}
                },
                heart : {
                    name : '心线',
                    display : '&rho; (&theta;) = a·(1 - sin (&theta;))',
                    formula : function (x) { return 2 * (1 - Math.sin (x));},
                    options : {lineStyle:{color:'#f00'}}
                },
                circle : {
                    name : '圆',
                    display : '&rho; (&theta;) = c',
                    formula : function (x) { return 3;},
                    options : {lineStyle:{color:'#0f0'}}
                },
                natural : {
                    name : '自然螺线',
                    display : '&rho; (&theta;) = e<sup>&theta;</sup>',
                    formula : function (x) { return Math.pow (Math.E, x); },
                    options : {lineStyle:{color:'#960'}, step:Math.PI / 1800, scale:0.0001}
                },
                yuanzhui : {
                    name : '圆锥曲线',
                    display : '&rho; (&theta;) = L/(1 + e·cos (&theta;))',
                    formula : function (x) { return 5 / (1 + 1.2 * Math.cos (x));},
                    options : {lineStyle:{color:'#00f'}}
                },
                test : {
                    name : '伯努利双纽线',
                    display : '&rho; (&theta;) = sqrt (2a<sup>2</sup>·sin2&theta;)',
                    formula : function (x) { return Math.sqrt(4 * 4 * 4 * Math.cos (2 * x)); },
                    options : {lineStyle : {color:'#000'}}
                }
            }
        }, initControlPanel = function () {
            while (preDefine.firstChild) {
                preDefine.removeChild (preDefine.firstChild);
            }
            var curves = definedCurve [type.value].curves;
            if (curves && curves.length) {
                var ul = document.createElement ('ul');
                ul.className = 'formulas';
                preDefine.appendChild (ul);
                for (var i = 0; i < curves.length; i ++) {
                    var name = curves [i], curve = definedCurve [type.value][name],
                        color = curve.options.lineStyle.color,
                        li = document.createElement ('li'),
                        a = document.createElement ('label'),
                        box = document.createElement ('input');
                    box.type = 'checkbox';
                    box.value = name;
                    box.id = 'chk-' + name;
                    box.onclick = repaint;
                    li.appendChild (box);
                    li.appendChild (document.createTextNode (' '));
                    a.innerHTML = curve.name + ' ' + curve.display;
                    a.setAttribute ('for', 'chk-' + name);
                    a.style.color = color;
                    ul.appendChild (li);
                    li.appendChild (a);
                }
            }
            options ['type'] = type.value;
            coordinates.clear ().init (options);
        }, repaint = function  () {
            coordinates.clear ();
            var boxes = document.getElementsByTagName ('input'), i, box, a;
            if (boxes && boxes.length) for (i = 0; i < boxes.length; i ++) {
                box = boxes [i];
                if (box.type != 'checkbox') continue;
                if (!box.checked) continue;
                a = definedCurve [type.value][box.value];
                coordinates.curve (a.formula, a.options);
            }
        };

    canvas.style.height = (window.innerHeight - 20) + 'px';
    canvas.style.width = w + 'px';

    coordinates = new ScienceLib.Geometry.Coordinates (options);

    scaleValue.innerHTML = scale.value;
    scale.onchange = function () {
        scaleValue.innerHTML = scale.value;
        options ['scale'] = parseFloat (scale.value);
        repaint ();
    };
    type.onchange = function () {
        initControlPanel ();
    };
    initControlPanel ();
};